<style type="text/css">
#box-wrapper { height: auto !important; }
.qq-upload-list img.delete { cursor: pointer; }
</style>
<div id="box-wrapper">
    <div id="top-left"></div>
    <div id="top-right"></div>
    <div id="top-center"></div>
    <div id="main-left"></div>        
    <div id="main-right"></div>        
    <div id="bottom-left"></div>        
    <div id="bottom-right"></div>        
    <div id="bottom-center"></div>
    <div id="box-content">                    
        <div class="header">
            <div class="logo">
                <div class="inner">
                    <h1>Upload a logo</h1><br /><span>Default Size: 200 x135</span>
                </div>
            </div>
            <h2>Choose any size</h2>                            
        </div>                        
        <div class="form">
            <form id="form-upload-logo" method="post" action="<?php echo $this->createUrl('/FrontDesk/site/selectModules'); ?>">
                <?php echo $siteInfo->showAttributesHiddenFields(array('logo_default_size')); ?>
                <div class="row" style="margin: 0; overflow: auto;">
                    <?php
                    $this->widget('application.extensions.EAjaxUpload.EAjaxUpload',
                        array(                                        
                            'id'=>'imageUploader',
                            'filesName'=>$siteInfo->logo_path,
                            'config'=>array(
                                'action'=>Yii::app()->createUrl('/FrontDesk/site/handleUploadLogo'),
                                'allowedExtensions'=>array('jpg','png','jpeg','gif','bmp'),
                                'sizeLimit'=>1*1024*1024,
                                'minSizeLimit'=>0,
                                'onSubmit'=>"js:function(id, fileName, responseJSON){
                                    if ($('ul.qq-upload-list li.qq-upload-success').length > 0)
                                    {
                                        var old_filename = $('ul.qq-upload-list li.qq-upload-success span.qq-upload-file').text();
                                        $.ajax({
                                            'type' : 'post',
                                            'url' : '/FrontDesk/site/removeLogo',
                                            'async' : false,
                                            'data' : { fileName : old_filename },
                                            'success' : function(json){
                                                $('ul.qq-upload-list li').remove();
                                                $('#SiteInfo_logo_path').val('');
                                            }
                                        });
                                    }    
                                }",
                                'onComplete'=>"js:function(id, fileName, responseJSON){
                                    var result = eval(responseJSON);
                                    $('.qq-upload-list li:last span.qq-upload-file').html(result.filename);
                                    $('#SiteInfo_logo_path').val(result.filename);
                                    $('.qq-upload-list li:last').append('<img class=\"delete\" src=\"".themeUrl()."/"."images/delete.png\" /><br />');                                        
                                    $('.qq-upload-list li:last span.qq-upload-size').remove();
                                }",                                        
                            )
                        ));
                    ?>                                
                    <div class="upload-option">
                        <?php echo CHtml::activeCheckBox($siteInfo,'logo_default_size',array('class'=>'site-info-field')); ?>
                        <label for="upload-option" class="upload-note">Check here if you want default size: 200 x135</label>
                    </div>
                </div>
                <div class="row buttons">
                    <a href="#" class="question-button"></a>
                    <div class="button">
                        <span>
                            <input type="submit" value="Step [4 of 6]">
                        </span>
                    </div>
                    <div class="button">
                        <span>
                            <a href="#" id="lnk-back-to-previous">Back</a>
                        </span>
                    </div>                                                                
                </div>
                <script type="text/javascript">
                $('#lnk-back-to-previous').click(function(){
                    $('#form-upload-logo').attr('action','<?php echo $this->createUrl('/FrontDesk/site/addContent'); ?>').submit();
                    return false;    
                });
                
                $('#imageUploader li.qq-upload-success img.delete').live('click',function(){
                    var _this=$(this);              
                    var fileName=_this.parent().find("span.qq-upload-file").text();
                    $.post(
                        baseUrl+"/FrontDesk/site/removeLogo",
                        {
                            fileName : fileName                        
                        },
                        function(json){                        
                            _this.closest('li').remove();
                            $('#SiteInfo_logo_path').val('');
                        }
                    ); 
                }); 
                </script>
            </form>
        </div>    
    </div>
</div>